<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" /> 
    <title>Flappy bird</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /* 开始标题动 */
        @keyframes move{
            from{
                transform: translateY(-20px);
            }
            to {
                transform: translateY(20px);
            }
        }

        /* 小鸟的翅膀动 */
        @keyframes bird{
            from{
                background-image: url(img/bird0.png);
            }
            to {
                background-image: url(img/bird1.png);
            }
        }

        .container {
            width: 320px;
            height: 568px;
            background-image: url(./img/bg.jpg);
            background-size: 100% 100%;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }

        li {
            position: absolute;
            width: 52px;
           
        }

        .top {
            top: 0;
            background-image: url(img/pipe_down.png);
            background-size: 100% 100%;
        }

        .bottom {
            bottom: 0;
            background-image: url(img/pipe_up.png);
            background-size: 100% 100%;
        }

        #bird {
            background-size: 100% 100%;
            width: 40px;
            height: 30px;
            position: absolute;
            top: 100px;
            left: 20px;
            display: none;
        }

        .birddown {
            background-image: url(./img/down.gif);
        }

        .birdup {
            background-image: url(./img/up.gif);
        }
        #start{
            margin-top: 30px;
            overflow: hidden;
            position: relative;
            z-index: 100;
        }

        #start>div:nth-of-type(1){
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 30px;
            animation: move 2s linear infinite alternate;
        }
        #start>div:nth-of-type(1) .head{
            width: 236px;
            height: 77px;
            background-image: url(./img/head.png);
        }

        #start>div:nth-of-type(1) .start_bird{
            width: 40px;
            height: 26px;
            background-image: url(./img/bird0.png);
            animation: bird .5s linear infinite alternate;
        }
        div.but{
            width: 96px;
            height: 33px;
            background-image: url(img/button_ok.png);
            background-size: 100% 100%;
            margin: 40px auto;

        }
        #end{
            text-align: center;
            margin-top: 70px;
            display: none;
            position: relative;
            z-index: 100;
        }
        #end .board{
            width: 269px;
            height: 135px;
            background-image: url(img/message.jpg);
            margin: 50px auto;
            position: relative;
        }
        #end .board p{
            position: absolute;
        }
        #end .board p.score{
            right: 50px;
            top: 40px;
        }
        #end .board p.best{
            right: 50px;
            top: 90px;
        }
        #score{
            height: 39px;
            text-align: center;
            position: relative;
            z-index: 1000;
            margin-top: 40px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="score">
            <img src="img/0.png" alt="">
        </div>
        <div id="start">
            <div>
                <div class="head"></div>
                <div class="start_bird"></div>
            </div>
            <div class="but"></div>
        </div>
        <div id="bird" class="birddown"></div>
        <ul>
            <!-- 管理管道 -->
            <!-- <li class="top"></li>
            <li class="bottom"></li> -->
        </ul>
        <div id="end">
            <img src="/img/game_over.png" alt="">
            <div class="board">
                <p class="score">0</p>
                <p class="best">0</p>
            </div>
            <div class="but"></div>
        </div>
    </div>
</body>
<script src="./js/jquery.js"></script>
<script src="./js/public.js"></script>
<script>
    //全局变量
    var sw = 320;
    var sh = 568;
    var bgDis = 0; //背景的移动距离
    var space = 100; //创建管道的间隔
    var count = 0; //管道的计数
    var timer = null;
    var isDown = true;  //是否向下飞
    var speed = 0;  //小鸟当前的速度
    var score = 0;   //分值变量

    //先判断本地是否有存在的成绩
    if(!localStorage.best){
        localStorage.best = 0;
    }

    //是否是移动端
    if (isPhone()) {
        sw = $(window).width();
        sh = $(window).height();
        $(".container").css({
            width: sw,
            height:sh
        })
    }

    function start() {
        timer = setInterval(function () {
            //背景的滚动
            bgMove();
            //管道的移动
            pipeMove();
            //小鸟移动
            birdMove();
            //碰撞检测
            check();
        }, 30)
    }
    //为ok按钮添加点击事件
    $("#start .but").click(function(){
        $("#start").hide();  //相当于 display = "none"
        $("#bird").show();    //相当于 display = "block"
        start();
    })

        //重新开始
    $("#end .but").click(function(){
        again();
    })


    //背景的滚动
    function bgMove() {
        bgDis -= 5;
        if (bgDis * -1 >= sw) {
            bgDis = 0;
        }
        $(".container").css("background-position", `${bgDis}px 0`)
    }

    // 管道移动
    function pipeMove() {
        // 1.创建管道
        createPipe();
        //2.移动管道
        $("li").each(function (index, el) {
            if(index===0 && $(el).attr("is")==1){
                //判断是否得分
               if( $(el).position().left + $(el).width() < 20){
                   score ++;
                   $(el).attr("is","0");
               }
               setScore();
            }
            $(el).css({
                left: $(el).position().left - 2
            })
            if ($(el).position().left <= -52) {
                $(el).remove();
            }
        })
    }
    //设置分数
    function setScore(){
        var arr = (score + "").split("");
        var str = "";
        for(var i=0; i<arr.length;i++){
            str+= `<img src="img/${arr[i]}.png">`;
        }
        $("#score").html(str);
    }


    // 1.创建管道
    function createPipe() {
        count++;
        if (count != space) {
            return;
        }
        count = 0;
        var pipeheight = rand(100, 300);
        $('<li class="top" is="1"></li>').css("height", pipeheight).appendTo($("ul")).css("left",sw)
        $('<li class="bottom"></li>').css("height", sh - pipeheight - 120).appendTo($("ul")).css("left",sw)

    }

    //小鸟移动
    function birdMove() {
        // 判断是触顶  触底
        if ($("#bird").position().top < 0 || $("#bird").position().top > sh - 30) {
            clearInterval(timer);
            gameOver();
            return;
        }
        if (isDown) {
            speed += 0.4;
            speed = speed > 8 ? 8 : speed;
        } else {
            speed += 0.7
            if (speed >= 0) {
                speed = 0;
                isDown = true;
                $("#bird").attr("class", "birddown")
            }
        }
        $("#bird").css({
            top: $("#bird").position().top + speed
        })

    }
    // 为小鸟添加点击事件
    $(".container").click(function () {
        isDown = false;
        speed = -8;
        $("#bird").attr("class", "birdup")
    })

    //为小鸟添加触屏事件   触屏事件不支持jq
    $(".container")[0].touchstart = function(e){
        //阻止默认事件
        e.preventDefault();
        isDown = false;
        speed = -8;
        $("#bird").attr("class", "birdup")
    }

    //重新开始
    function again() {
        bgDis = 0; //背景的移动距离
        count = 0; //管道的计数
        isDown = true;  //是否向下飞
        speed = 0;  //小鸟当前的速度
        score = 0;
        setScore();
        $("ul").html("");
        $("#bird").attr("class", "birddown").css("top", 100).hide();
        $("#start").show(); 
        $("#end").hide();  //相当于 display = "none"
    }

    //碰撞检测
    function check() {
        $("li").each(function (index, el) {
            if (isCrash(el, $("#bird")[0])) {
                clearInterval(timer);
                gameOver();
                return;
            }
        })

    }

    //游戏结束
    function gameOver(){
        $("#end").show();
        $("#end .score").html(score);
        if(localStorage.best/1 <score){
            localStorage.best =score;

        }
        $("#end .best").html(localStorage.best)
    }
</script>

</html>